<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>介绍</title>

    <!-- 幻宇logo-->
    <link rel="shortcut icon" href="../logo/幻宇logo.png" type="image/x-icon">

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./介绍css/导航栏.css">

    <!-- js -->
    <script src="./介绍js/导航栏.js"></script>
    <style>
        body{
            overflow: hidden;
            width: 100%;
        }
        .section {
            height: 100vh;
            background-position: center;
        }

    </style>
</head>
<body>


<nav class="navigation">
    <ul>
        <li><a href="../主页.html">主页</a></li>
        <li><a href="#services">排行榜</a></li>
        <li><a href="../游戏推荐/游戏推荐.html">游戏推荐</a></li>
    </ul>
</nav>

<!-- 页面内容 -->
<div class="section" style="background-image: url('./背景/top1.jpg');"></div>
<div class="section" style="background-image: url('./背景/top22.jpg');"></div>
<div class="section" style="background-image: url('./背景/top3.jpg');"></div>
<div class="section" style="background-image: url('./背景/top4.jpg');"></div>
<!--<section id="home" style="height: 100vh;">Home Section-->
<!--    <div class="video-background">-->
<!--        <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" id="bgVideo">-->
<!--            <source src="./背景/2e8ea5cf21d0827bbfa912d910aea50f.mp4" type="video/mp4">-->
<!--        </video>-->
<!--    </div>-->
<!--</section>-->
<!--<section id="services" style="height: 100vh;">Services Section-->
<!--    <div class="video-background">-->
<!--        <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" id="bgVideo">-->
<!--            <source src="./背景/2e8ea5cf21d0827bbfa912d910aea50f.mp4" type="video/mp4">-->
<!--        </video>-->
<!--    </div>-->
<!--</section>-->
<!--<section id="about" style="height: 100vh;">About Section</section>-->
<!--<section id="contact" style="height: 100vh;">Contact Section</section>-->



<script>
    const sections = document.getElementsByClassName('section');

    let currentSectionIndex = 0;

    window.addEventListener('wheel',function(event){
        console.log(event);
        if(event.deltaY > 0){
            if(currentSectionIndex < sections.length-1){
                currentSectionIndex +=1;
                scrollToSection(currentSectionIndex);
            }
        }else{
            if(currentSectionIndex != 0){
                currentSectionIndex -=1;
                scrollToSection(currentSectionIndex);
            }
        }
    })

    function scrollToSection(index){
        sections[index].scrollIntoView({behavior:"smooth"})
    }
</script>
</body>
</html>